<template>
  <div>
    <van-nav-bar title="订单"  :fixed="true" :placeholder="true" left-arrow @click-left="return1"></van-nav-bar>
    <div v-if="order.status==4"><img src="/static/没有收藏.png" style="width: 100%"><div style="text-align: center">订单已超时取消</div></div>
    <div v-if="!order"><img src="/static/没有收藏.png" style="width: 100%"><div style="text-align: center">订单不存在</div></div>
    <div style="height: calc(100vh - 96px);overflow-y: auto;overflow-x: hidden;background-color: #f6f6f6" v-if="order.status==0">
      <div style="position: relative">
        <van-contact-card style="height: auto"></van-contact-card>
        <div style="position: absolute;width: 100%;height: auto;left: 0;top: 0;background-color: white;padding: 10px">
          <div style="display: flex;align-items: center">
            <div>
              <div style="display: flex; align-items: center;">
                <div style="display: flex; margin-right: 10px"><van-tag type="danger" v-if="order.district==0">默认</van-tag></div>
                <div>{{order.recipientName}} {{order.phoneNumber}}</div>
              </div>
              <div style="font-weight: bold; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" :style="{width:icoWidth}">
                {{order.country}}{{order.city}}{{order.province}}{{order.streetAddress}}
              </div>
            </div>
            <div style="margin-left: auto" ref="ico">
              <van-icon name="arrow" @click="tiao"/>
            </div>
          </div>
        </div>
      </div>

      <div style="margin-top: 10px;background-color: white;">
        <van-card :num="order.num" :thumb="order.itemImages">
          <template #desc>
            <div>{{order.specification}}</div>
          </template>
          <template #price>
            <div style="font-size: 16px;color: red">￥{{order.price}}</div>
          </template>
          <template #title>
            <div style="white-space: nowrap;overflow: hidden; text-overflow: ellipsis">{{order.itemDescription}}</div>
          </template>
        </van-card>
      </div>
      <div style="margin-top: 10px;background-color: white;display: flex;padding: 10px">
        <div>商品金额</div>
        <div style="margin-left: auto;font-weight: bold">￥{{order.price*order.num}}</div>
      </div>
      <div style="background-color: white;display: flex;padding: 10px">
        <div>退换货免运费</div>
        <div style="margin-left: auto;font-weight: bold">￥0.00</div>
      </div>
      <div style="background-color: white;display: flex;padding: 10px">
        <div>运费</div>
        <div style="margin-left: auto;font-weight: bold">￥0.00</div>
      </div>
      <div style="background-color: white;display: flex;padding: 10px;border-top: 1px #eeeeee solid">
        <div></div>
        <div style="margin-left: auto;">合计：<span style="color: red;font-weight: bold">￥{{order.price*order.num}}</span></div>
      </div>
      <div style="margin-top: 10px;background-color: white;display: flex;padding: 10px">
        <div>支付方式</div>
        <div style="margin-left: auto;font-weight: bold">在线支付</div>
      </div>
    </div>
    <van-submit-bar :price="order.price*order.num*100" button-text="立即支付" @submit="onSubmit" text-align="left" v-if="order.status==0">
      <template #default>
        <div style="display:flex;align-items: center;color: white;padding: 1px;">
          <div style="text-align: center;align-items: center;font-size: 14px;border-radius: 30px 0 0 30px;border: 1px red solid;background-color: red">等待付款</div>
          <div style="display: flex;align-items: center;background-color: rgb(253,179,179);border: 1px rgba(253,179,179) solid;border-radius: 0px 30px 30px 0 "> <van-count-down style="color: white;padding: 0" :time="1800000-Math.floor((new Date().getTime() - new Date(order.createTime).getTime()))" /></div>
        </div>

      </template>
    </van-submit-bar>
  </div>
</template>
<script>
import Vue from 'vue';
import { SubmitBar } from 'vant';
import { ContactCard } from 'vant';
import { NavBar } from 'vant';
import { Tag } from 'vant';
import { Icon } from 'vant';
import { Card } from 'vant';
import { Stepper } from 'vant';
import request from "../../../utils/request";
import { CountDown } from 'vant';

Vue.use(CountDown);
Vue.use(Stepper);
Vue.use(Card);
Vue.use(Icon);
Vue.use(Tag);
Vue.use(NavBar);
Vue.use(ContactCard);
Vue.use(SubmitBar);
export default {
  data(){
    return{
      cartId:this.$route.query.cartId,//detailId
      order:{},
      icoWidth:'',
    }
  },
  mounted() {
    this.icoWidth = 'calc(100vw - 20px - '+this.$refs.ico.offsetWidth+'px)';
  },
  created() {
    this.getOrder()
  },
  methods:{
    // 判断是否是购买返回的商品页面
    return1(){
        this.$router.push('/cart')

    },
    tiao(){
      if (this.itemId){
        this.$router.push({path:'/address',query:{orderId:this.$route.query.orderId,i:this.i,itemId:this.itemId}})
      }else {
        this.$router.push({path:'/address',query:{orderId:this.$route.query.orderId}})
      }

    },
    getOrder(){
      // alert(this.$route.query.ids)
      request.post('/order/getOrders',{orderIds:this.$route.query.ids}).then(resp=>{
        if (resp.code===0){
          // this.order=resp.data
        }
      })
    }
  }
}
</script>
<style scoped>
>>> .van-nav-bar .van-icon{
  color: black!important;
}
</style>
